import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Button } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import ListTable from "./Components/ListTable";
import WhiteListAdd from "./Components/WhiteListAdd";
import EquipmentAdd from "./Components/EquipmentAdd";



@connect(({ equipment_integrated, global }) => ({
  dictionaries:global.dictionaries,
  selectSource:global.selectSource,
}))

export default class EquipmentList extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      modalEquipAddVisible: false,
      modalWiteListVisible: false,
      modalWiteListids:null,
      detailId: 0,
      detailInfoId: 0,
      detailInfoName:null,
      isReloadList:false,
    };
  }

  componentWillUnmount(){
    const { dispatch } = this.props;
    dispatch({
      type: `equipment_integrated/appendClearState`,
    })
  }


  componentDidMount() {
    const { dispatch } = this.props;
    // 数据字典
    // dispatch({
    //   type: 'global/fetch_dictionar',
    //   // payload:["devType", "status", "whitelistReason"]
    // });
    // 维保单位列表
    dispatch({
      type: 'global/fetch_select_maintencompany',
    });
    // 管理员列表
    dispatch({
      type: 'global/fetch_select_selfusers',
    });
    // 区域列表选择
    dispatch({
      type: 'global/fetch_select_district',
    });

  }

  //
  sotpReloadList = () =>{
    this.setState({
      isReloadList:false,
    });
  }

  // 添加白名单
  handleWiteList = (ids) => {
      this.setState({
        modalWiteListids: ids,
      },()=>{
        this.handleWiteListModalVisible(true);
      });
  };

  // 显示白名单model
  handleWiteListModalVisible = flag => {
    this.setState({
      modalWiteListVisible: !!flag,
    });
  };

  // 白名单加入后回调
  handleWiteListModelCallBack=(value)=>{
    this.handleWiteListModalVisible(false);
    const { dispatch } = this.props;
    const { modalWiteListids } = this.state;

    if(value && modalWiteListids && modalWiteListids.length>0){
      dispatch({
        type: 'equipment_integrated/action_equipment_witelist',
        payload: {
          devIds:modalWiteListids,
          ...value,
        },
      }).then(()=>{
        this.setState({
          selectedRows: [],
          isReloadList:true,
        });
        // this.getDataList(formValues,pageSize,currentPage);
      });
    }

  }

  // 显示新增修改model
  handleEquipModalVisible= flag => {
    this.setState({
      modalEquipAddVisible: !!flag,
    });
  };

  // 设备新增、编辑后model回调
  handleEquipModelCallBack=()=>{
    this.handleEquipModalVisible(false);
    this.setState({
      isReloadList:true,
    });
    // const {formValues,pageSize,currentPage } = this.state;
    // this.getDataList(formValues,pageSize,currentPage);
  }

  // 编辑设备
  handleEditEquipment = id => {
    this.setState(
      {detailId: id},
      () => {
        this.handleEquipModalVisible(true);
      }
    );
  };

  // 展示详情
  handleEquipmentInfo= (id,name) => {
    this.setState(
      {
        detailInfoId: id,
        detailInfoName:name
      }
    );
  };




  render() {
    const { dictionaries, selectSource, location } = this.props;
    const { modalWiteListVisible, modalEquipAddVisible, detailId, isReloadList } = this.state;
    const pagesquery = location.query;

    return (

          <PageHeaderLayout >
            <ListTable
              dictionaries={dictionaries}
              selectSource={selectSource}
              addModelCallBack={this.handleEditEquipment}
              detailModelCallBack={this.handleEquipmentInfo}
              witeListModelCallBack={this.handleWiteList}
              sotpReloadList={this.sotpReloadList}
              isReloadList={isReloadList}
              pagesquery={pagesquery}
            />

            <WhiteListAdd
              visible={modalWiteListVisible}
              onCancel={e => this.handleWiteListModalVisible(e)}
              callback={this.handleWiteListModelCallBack}
              reason={dictionaries.whiteListReason}
            />

            <EquipmentAdd
              visible={modalEquipAddVisible}
              onCancel={e => this.handleEquipModalVisible(e)}
              callback={this.handleEquipModelCallBack}
              detailId={detailId}
              dictionaries={dictionaries}
              selectSource={selectSource}
            />


          </PageHeaderLayout>

    );
  }
}
